<template>
    <div>
        <film-swiper :key="datalist.length">
            <film-swiper-item v-for="data in datalist" :key="data.id" class="filmswiperitem">
                <img :src="data.poster" alt="">
            </film-swiper-item>
        </film-swiper>
        <film-header class="sticky"></film-header>
        <router-view></router-view>
    </div>
</template>
<script>
import filmSwiper from '@/components/film/FilmSwiper'
import filmSwiperItem from '@/components/film/FilmSwiperItem'
import filmHeader from '@/components/film/FilmHeader'
import axios from 'axios'
export default {
    data(){
        return{
            datalist:[],
            datafilm:''
        }
    },
    mounted(){
        axios.get("/maoyan.json").then(res =>{
            console.log(res.data)
            this.datalist = res.data.data.films
        })
    },
    components:{
        filmSwiper,
        filmSwiperItem,
        filmHeader
    }
}
</script>
<style lang="scss" scoped>
.filmswiperitem{
    img{
        width:100%;
        height: 180px;
    }
}
.sticky{
    position: sticky;
    top: 0;
    background: white;
    z-index: 15;
}
</style>
    